<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" @click="getBack" alt class="img_zuo" />
        <div>宣传部署</div>
      </div>
    </header>
    <div class="contant">
      <div class="boxx">
        <div class="list-box">
<!--          <span class="dian">方式-</span>-->
          <span class="yhd">信息报送-{{data.infoName}}</span>
        </div>
      </div>
    </div>
    <div class="yyandimg">
      <div
        ref="content"
        :class="listHeight > 48 ? 'list1-sapn' : ''"
        class="boxitem">{{ data.title }}</div>
      <div class="ly_tc">
        <img src="../../assets/images/ly_dt.gif" alt="" />
      </div>
      <div class="yuyin_list">
        <div class="ly_start">
          <span class="ly">
            <img src="../../assets/images/mkf.png" />
            <span>按住说话</span>
          </span>
        </div>
        <div class="ly_play" data-url="">
          <div>
            <span class="ly">
              <img src="../../assets/images/play.png" />
              <span class="ly_s">{{contractime!== "" ?contractime: '0"'}}</span>
            </span>
            <img class="del_ly" src="../../assets/images/delete.png" />
            <img class="zhuan" src="../../assets/images/zhuan.png" />
          </div>
        </div>
      </div>
      <div class="boxximg" v-show="imgurl.length>0||list_mv.length>0">
        <!-- <ul class="img-box img_upload">
        <div class="img-item radius-m"></div>
      </ul> -->
        <ul class="img-box imgs_ul">
          <li class="img-item radius-m img-list" v-for="(v,index) of imgurl">
            <div class="img-content">
              <img class="img-src img_tu" :src="show_path +v" />
            </div>
            <div :style="imgText[index]==undefined||imgText[index]==''?'':'display: block;'" class="img-desc">{{imgText[index]}}</div>
          </li>
        </ul>
        <ul class="video-list" v-for="(obj,i) of list_mv">
          <video controls>
            <source :src="show_path+obj" type="video/mp4">
            <source :src="show_path+obj" type="video/ogg">
            您的浏览器不支持Video标签。
          </video>
          <!-- <div class="del" @click.stop="del(i,'mv')"><img src="../../../assets/images/delete.png" /></div> -->
        </ul>
      </div>
      <div>
        <div class="bootom">
          <div>{{mc}}</div>
          <div class="centtr">
            {{data.name}}
            <img src="../../assets/images/people.png" />
            <div style="color: #999999;">1</div>
          </div>
          <div style="color: #999;">{{time}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import terminal from "../../assets/js/terminal";

  export default {
    name: "xcbs_detail",
    data() {
      return {
        id: '',
        data: '',
        contractime: '',
        userId: '',
        list_mv: [],
        time: '',
        mc: "",
        imgurl: [],
        lujing: '',
        show_path: '',
        imgText: [], //描述没有
        listHeight: 0,
        terminal: false
      };
    },
    destroyed() {
      setTimeout( () => {
        this.$zoom.showImagesFn.hideContainer();
      })
    },
    methods: {
      stopPlay(){
        this.$yy.stop();
      },
      //  语音
      ly() {
        let that = this;
        if (that.terminal !== true) {
          $(".yuyin_list").hide(); //隐藏录音按钮
        }
        if (this.data.contract === '' && that.terminal === true) {
          $(".yuyin_list").hide(); //隐藏录音按钮
        }
        this.$yy.ly_fun({
          play_img: require("../../assets/images/play.png"),
          playing_img: require("../../assets/images/play_dt.gif"),
          _this: this
        }, function(res) {
          that.txtbxnr += res
          if (that.txtbxnr.length >= 500) {
            // that.txtbxnr=res
            return that.$toast('文字限制在500字以内!')
          }
        });
      },
      timestampToTime(cjsj) {
        var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = date.getMinutes() + ':'
        var s = date.getSeconds()
        return Y + M + D + h + m + s
        // console.log(timestampToTime (1533293827000))
      },
      getBack() {
        this.stopPlay();
        // if (this.lujing === 'statistical_query') {
        //   this.$router.push('/statistical_query')
        // } else if (this.lujing === 'statistical_list') {
        //   this.$router.push('/statistical_list')
        // } else if (this.lujing == "xcbs_rwjb") {
        //   this.$router.push("/xcbs_rwjb")
        // } else {
        //   this.$router.push("/gzzj")
        // }
        this.$router.back();
      },
      getdetail() {
        this.axios.get(
          `${this.$global_msg.Url.host}/Information/selectInformationById?id=${this.id}&userid=${this.userId}`, {
            headers: {
              "Content-Type": "application/json"
            }
          }).then(res => {
          console.log(res)
          if (res.data.code == 200) {
            this.mc = res.data.msg
            let data = res.data.rows
            this.data = data
            if (data.contractime == '0"') {
              this.contractime = ""
            } else {
              this.contractime = data.contractime
            }
            this.time = this.timestampToTime(data.time)

            if (data.imgurl !== "") {
              var img = []
              img.push(data.imgurl.split(","))
              this.imgurl = img[0]
              console.log(this.imgurl)
            }

            if (data.videourl !== "") {
              var vide = []
              vide.push(data.videourl.split(","))
              this.list_mv = vide[0]
              console.log(this.list_mv)
            }
            if (data.contract !== "") {
              $(".ly_play").attr("data-url", this.show_path + data.contract)
              $(".ly_start").hide(); //隐藏录音按钮
              $(".del_ly").hide(); //隐藏删除按钮
              $(".ly_play").show(); //显示录音播放
              $(".zhuan").addClass('yc')
              console.log(this.show_path + data.contract)
            }
            this.ly()
          } else {
            this.$toast(res.data.msg)
          }
        }).catch(e => terminal._error(e));

      }
    },
    watch: {
      data(newData, oldData) {
        const content = this.$refs.content;
        //使用$nextTick方法
        this.$nextTick(() => {
          this.listHeight = content.offsetHeight;
        })
      }
    },
    mounted() {
      var _this = this;
      document.body.style.backgroundColor = "#F7F7F9";
      this.show_path = this.$global_msg.Url.hosts+ '';
      console.log(this.id)
      this.terminal = terminal.terminals().android;
      this.getdetail()
      //切换后台
      document.addEventListener("pause", function(){
        _this.stopPlay();
      }, false);
      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.getBack();
      // }, false);
    },
    created() {
      this.userId = localStorage.getItem("userId") //获取访问id
      console.log(this.userId)
      var jfd = JSON.parse(sessionStorage.getItem("todetail"))
      console.log(jfd)
      this.lujing = jfd.lujing
      this.id = jfd.id
    }
  };
</script>
<style scoped>
  .bootom {
    padding: 0 0.35rem;
    display: flex;
    justify-content: space-between;
    height: 1.388888rem;
    /* border-top: 1px solid #DDDDDD; */
    align-items: center;
  }

  .centtr {
    display: flex;
    /* border: 1px solid red; */
    align-items: center;
    margin-right: 0.8rem;
  }

  .centtr img {
    width: 0.4rem;
    height: 0.4rem;
    margin: 0 0.07rem;
  }

  /* 视频列表 */
  .video-list {
    padding-top: 0.259259rem;
    margin-bottom: 0.37037rem;
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    flex-direction: column;
    border-top: 1px #f2f2f2 solid;
  }

  .video-list video {
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    width: auto;
    height: 4.87037rem !important;
    margin-top: 0.259259rem;
  }

  .video-list video:first-child {
    margin-top: 0;
  }

  .video-list .del {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.925925rem;
    overflow: hidden;
  }

  .video-list .del img {
    width: 100%;
    height: 100%;
  }

  .voice {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.8rem;
    width: 4rem;
    border: 1px solid #F7F7F9;
    color: #5F5D5C;
    margin: 0.3rem;
  }

  .voice img {
    margin-right: 0.2rem;
    width: 0.4rem;
  }

  /* mine */
  .item_child {
    display: flex;
    align-items: center;
    max-width: 75%;
    width: auto;
    padding: 0.4rem 0;
    /* border: 1px solid red; */
  }

  .img_appar {
    width: 0.5rem;
  }

  .boxx {
    background-color: white;
    border-radius: 0.2rem;
  }

  .boxximg {
    padding: 0 0.15rem;
    /* border-radius: 0.2rem; */
    margin-top: 3.5rem;
    border-bottom: 1px solid #f2f2f2;
  }

  .item {
    /* height: 1.2rem; */
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
  }

  .item1 {
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
    align-items: center;
  }

  .item_first {
    margin-top: 0.4rem;
  }

  .yyandimg {
    border-radius: 0.2rem;
    background-color: white;
    /* margin-top: 0.2rem; */
  }

  .contant {
    margin-top: 1.8519rem;
    border-radius: 0.2rem;
  }

  /* 图片列表 */
  .img-box {
    /* margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    margin-top: 0.34074rem; */
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
  }

  .img-box .img-item {
    width: 4.481481rem;
    /* height: 2.814814rem; */
    background-image: url('../../assets/images/tianjia.png');
    background-size: 100% 100%;
    margin-bottom: 0.425925rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px #CCCCCC solid;
    border-radius: 30px;
  }

  /* 图片列表的内容和按钮 */
  .img-box .img-item .img-content {
    width: 100%;
    height: 2.814814rem;
    z-index: 10;
    background-color: #FFFFFF;
    position: relative;
  }

  .img-box .img-item .img-content .img-src {
    width: 100%;
    height: 100%;
    z-index: 11;
  }

  .img-box .img-item .img-content .img-group {
    width: 1.388888rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;
    border-left: 1px #FFFFFF solid;
    display: flex;
    flex-direction: column;
  }

  .img-box .img-item .img-content .img-group .img-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px #FFFFFF solid;
  }

  .img-box .img-item .img-content .img-group .img-btn:last-child {
    border-left: none;
  }

  .img-box .del-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }

  .img-box .desc-btn {
    color: #FFFFFF;
    font-size: 0.925925rem;
  }

  /* 图片列表的描述 */
  .img-box .show-desc {
    height: 3.703703rem;
  }

  .img-box .img-item .img-desc {
    width: 100%;
    /* height: 0.851851rem; */
    text-align: center;
    flex: 1;
    background-color: #FFFFFF;
    padding: 0.1rem 0;
    display: none;
    /* height: 2rem; */
  }

  .img-box .show-desc .img-desc {
    display: block;
  }

  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /*  .img-list:first-child {
    margin-left: 4.814814rem;
  } */
  .imgs_ul {
    margin-top: -3.255554rem;
    z-index: 2 !important;
  }

  .img_upload .img-item {
    z-index: 3 !important;
  }

  /* 头部 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }

  /* textarea */
  .boxitem {
    padding: 0.35rem;
    font-size: 0.3889rem;
    max-height: 10rem;
    height: auto;
    border-bottom: 1Px solid #f2f2f2;
    overflow: hidden;
  }

  /* 语音 */
  .yuyin_list {
    width: 100%;
    position: relative;
    display: flex;
    padding: 0.2315rem 0.3704rem;
    word-break: break-all;
    font-size: 0.3888888888888889rem;
    background-color: #fff;
    /* border-bottom: 1Px solid #f2f2f2; */
    box-sizing: border-box;
  }

  .ly {
    width: 3.0185185185185186rem;
    height: 1rem;
    border: 1Px solid #f2f2f2;
    border-radius: 0.1111rem;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #757575;
    /* justify-content: center; */
  }

  .ly img {
    width: 0.3704rem;
    height: 0.5rem;
    margin: 0 0.2777777777777778rem;
    /* margin-right: 0.2777777777777778rem; */
  }

  .ly_play .ly>span {
    float: right;
    /* margin: 0.282222rem 0.9259259259259259rem 0 0; */
  }

  .ly_start .ly>span {
    float: right;
    /* margin: 0.2037037037037037rem 0.46296296296296297rem 0 0; */
  }

  .del_ly,
  .zhuan {
    width: 0.8518518518518519rem;
    margin: 0.09259259259259259rem 0 0 0.23148148148148148rem;
    height: 0.8518518518518519rem;
  }

  .ly_tc {
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    height: 3.7037037037037037rem;
    width: 3.7037037037037037rem;
    border-radius: 0.18518518518518517rem;
    text-align: center;
    z-index: 2000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.3888888888888889rem;
    display: none;
  }

  .ly_tc>img {
    margin: 1rem auto 0 auto;
    width: 1.5rem;
  }

  .yc {
    display: none;
  }

  .ly_play>div {
    display: flex;
  }

  .ly_play {
    display: none;
  }
  .list-box {
    display: flex;
    align-items: center;
    border-bottom: 1Px solid #f2f2f2;
    padding: 0.4rem 0.35rem;
    white-space: normal;
  }
  .dian{
    word-break: keep-all;
  }
  .list1-sapn {
    text-indent:2em
  }
</style>
